﻿<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=uPBWN5j3HdwY5wofjzWP2eY58PgXAazl"></script>
    <link href="layui-v2.6.8/layui/css/layui.css" rel="stylesheet" />
    <style>
        html, body, #container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0
        }
    </style>

</head>
<body>

    <script src="layui-v2.6.8/layui/layui.js"></script>
    <script src="js/theme.js"></script>
    <script src="js/jquery-1.12.1.min.js"></script>
    <!-- 修正form的class -->
    <form class="layui-form" runat="server">
        <div style="position: fixed; z-index: 999;">
            <div class="layui-btn layui-btn-normal" id="sky">3D+天空色</div>
            <div class="layui-inline">
                <div class="layui-input-block">
                    <select name="theme" lay-filter="filterTheme">
                        <!-- 修正selected属性 -->
                        <option value="" selected>选择主题</option>
                        <option value="茶田">茶田</option>
                        <option value="中秋">中秋</option>
                        <option value="Candy">Candy</option>
                        <option value="赛博朋克">赛博朋克</option>
                        <option value="一蓑烟雨">一蓑烟雨</option>
                        <option value="眼眸">眼眸</option>
                        <option value="OKR">OKR</option> <!-- 修正"0KR"为"OKR" -->
                        <option value="绿野仙踪">绿野仙踪</option>
                        <option value="朱砂痣">朱砂痣</option> <!-- 修正"朱砂速"为"朱砂痣" -->
                        <option value="青花瓷">青花瓷</option>
                        <!-- 修正oplion为option -->
                        <option value="出行">出行</option>
                        <option value="物流">物流</option>
                    </select>
                </div>
            </div>
        </div>
    </form>

    <div id="container"></div>


    <script>

        //1.创建地图实例
        var map = new BMapGL.Map("container");
        //2.设置中心经纬度  这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中120.872845表示经度，32.021089表示纬度。（为南通濠河风景区坐标）
        var point = new BMapGL.Point(120.872845, 32.021089);
        //3.在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作 值一般是3-19
        map.centerAndZoom(point, 15); // 3:中国  19：街道级别 一般是15

        //加载控件
        map.enableScrollWheelZoom(true); //开启鼠标滚轮 地图可以进行放大 缩小
        map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件 左下角显示
        map.addControl(new BMapGL.ZoomControl());// 添加缩放控件 右下角显示
        map.addControl(new BMapGL.CityListControl());  // 添加城市列表控件 左上角
        map.addControl(new BMapGL.MapTypeControl());// 地图类型 右上角显示



        $("#sky").click(function () {
            //设置地图3D视觉
            map.setHeading(64.5);//旋转角度
            map.setTilt(73);//地图倾斜
            //设置天空颜色
            map.setDisplayOptions({
                skyColors: ['rgba(186, 0, 255, 0)', 'rgba(186, 0, 255, 0.2)']//天空颜色
            })
        })


        layui.use(['layer', 'form'], function () {
            var layer = layui.layer
                , form = layui.form;

            form.on('select(filterTheme)', function (data) {

                //console.log(data.elem); //得到select原始DOM对象
                //console.log(data.value); //得到被选中的值
                //console.log(data.othis); //得到美化后的DOM对象
                let value = data.value;
                map.setMapStyleV2({ styleJson: themes[value] });//即可渲染地图
            });
        });


    </script>

</body>
</html>
